<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise内置对象</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            color: white;
            position:absolute;
        }
        #one{
            background-color: red;
            top: 100px;
        }
        #two{
            background-color: #00ff00;
            top: 200px;
        }
        #three{
            background-color: #0f0f0f;
            top: 300px;
        }
    </style>
</head>
<body>
    <h1>解决回调地狱</h1>
    <div id="one">1号选手</div>
    <div id="two">2号选手</div>
    <div id="three">3号选手</div>
</body>
<script src="../js/jquery.min.js"></script>
<script>
    function task1(){
        //new出promise对象的同时会执行传入的匿名函数
        let p1=new Promise((resolve,reject)=>{
            //模拟ajax
            setTimeout(() => {
                console.log("Promise    执行下单");  
                let n=Math.random();//0-1
                if(n>=0.5){
                    console.log("下单成功");
                    resolve('订单号10000,支付99.9￥');
                }else{
                    reject('下单失败');
                }
            }, 2000);
            //真实使用
            /*
            $.ajax({
                url:'增加订单的url地址',//笑话接口:https://autumnfish.cn/api/joke/list?num=数量
                data:{'数据'},
                type:'get',
                success:function(date){
                    resolve('下单成功');
                },
                error:function(date){
                    reject('下单失败');
                }
            })
            */
        });
        return p1;
    }
    function task2(){
        return new Promise((resolve,reject)=>{
            setTimeout(() => {
                console.log("Promise    执行付款");  
                let n=Math.random();//0-1
                if(n>=0.5){
                    console.log("支付成功");
                    resolve('用户id001,支付99.9￥成功');
                }else{
                    reject('支付失败');
                }
            }, 1000);

        })
    }
    function task3(){
        return new Promise((resolve,reject)=>{
            setTimeout(() => {
                console.log("Promise    执行更改库存");  
                let n=Math.random();//0-1
                if(n>=0.5){
                    console.log("修改库存成功");
                    resolve('发货中,修改库存odk');
                }else{
                    reject('修改库存失败');
                }
            }, 3000);

        })
    }
    //链式操作
    /*
    task1().then((data1)=>{
        console.log("成功执行了ajax请求1----"+data1);
        return task2();
        },(data1)=>{
        console.log("ajax请求1执行失败----"+data1);
    }).then((data2)=>{
        console.log("成功执行了ajax请求2----"+data2);
        return task3();
    },(data2)=>{
        console.log("ajax请求2执行失败----"+data2);
    }).then((data3)=>{
        console.log("成功执行了ajax请求3----"+data3);
    },(data3)=>{
        console.log("ajax请求3执行失败----"+data3);
    });
    */
    //All执行
    /*
    Promise.all([task1(),task2(),task3()]).then((ret)=>{
        console.log("所有任务都做完了执行",ret);
    });
    */


    //race(赛跑)执行
    /*
    Promise.race([task1(),task2(),task3()]).then((ret)=>{
        console.log("第一个执行的返回结果是:"+ret);
    })
    */
    //使用场景:有执行顺序时用链式,无执行顺序时用All





    //Homework
    /*
    ES6语法完成：
1、在一个游戏中有两个任务，一个是采蘑菇，一个是杀鸡，请通过promise实现两个任务都完成以后才能升级。
2、在一个游戏中有两个任务，一个是采蘑菇，一个是杀鸡，请通过promise实现只要其中有一个任务完成就显示“恭喜您获得大陆勇士的称号”
3、在页面上创建三个div，div从左往右移动，通过Promise使这三个div的移动速度不一样，同时当第一个div到达屏幕右边时，弹出当前到达屏幕右边的div的编号，并提示“第x个div获得了冠军”。
    */
   //采蘑菇
   function mushroom(){
        return new Promise((resolve,reject)=>{
            setTimeout(() => {
                console.log("采蘑菇");
                resolve('采蘑菇成功....');
            }, 2000);
        })
   }
   //杀鸡
   function killchicken(){
        return new Promise((resolve,reject)=>{
            setTimeout(() => {
                console.log("杀鸡");
                resolve('杀鸡成功....');
            }, 1000);
        })
   }
   //1
   /*
   Promise.all([mushroom(),killchicken()]).then((ret)=>{
        console.log("两任务都完成了,成功升级....",ret);
   })
   */
   //2
   /*
   Promise.race([mushroom(),killchicken()]).then((ret)=>{
       console.log("恭喜您获得大陆勇士的称号:"+ret);    
   })
   */
   //3(此处设置终点为1920,可用变量设置)
   //定时器
   var s1;
   var s2;
   var s3;
   function div1(){
       var speed=parseInt(Math.random()*(1200-1)+1);
       console.log(speed);
       return new Promise((resolve,reject)=>{ 
        s1=setInterval(()=>{
                let one=document.querySelector("#one");
                if(one.style.left==""){
                    one.style.left="0px";
                }
                one.style.left=parseInt(one.style.left)+speed+"px";
                
                if(parseInt(one.style.left)>=1920){
                    console.log("到终点了...");
                    one.style.left=1920+"px";
                    resolve("div1是冠军");
                    clearInterval(s1)
                }
            
        },1000)
       });
       
   }
   function div2(){
        var speed=parseInt(Math.random()*(1200-1)+1);
        console.log(speed);
        return new Promise((resolve,reject)=>{
            s2=setInterval(()=>{
                let two=document.querySelector("#two");
                if(two.style.left==""){
                    two.style.left="0px";
                }
                two.style.left=parseInt(two.style.left)+speed+"px";
                if(parseInt(two.style.left)>=1920){
                    console.log("到终点了...");
                    two.style.left=1920+"px";
                    resolve("div2是冠军")
                    clearInterval(s2)
                }
                
            },1000)
       });
   }
   function div3(){
        var speed=parseInt(Math.random()*(1200-1)+1);
        console.log(speed);
        return new Promise((resolve,reject)=>{
            s3=setInterval(()=>{
                let three=document.querySelector("#three");
                if(three.style.left==""){
                    three.style.left="0px";
                }
                three.style.left=parseInt(three.style.left)+speed+"px";
                if(parseInt(three.style.left)>=1920){
                    console.log("到终点了...");
                    three.style.left=1920+"px";
                    resolve("div3是冠军")
                    clearInterval(s3);
                }
                
            },1000)
       });
   }
        Promise.race([div1(),div2(),div3()]).then((ret)=>{
            console.log(ret);    
            clearInterval(s1)
            clearInterval(s2)
            clearInterval(s3)
        })
   
</script>
</html>